<template>
  <div class="app-container">
    <el-card class="mb20">
      <el-form :model="saleDeliveryQueryForm" inline>
        <el-form-item label="发货编号">
          <el-input
            v-model="saleDeliveryQueryForm.deliveryNo"
            placeholder="发货编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="合同编号">
          <el-input
            v-model="saleDeliveryQueryForm.contractNo"
            placeholder="合同编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="客户名称">
          <el-select
            v-model="saleDeliveryQueryForm.customerName"
            placeholder="客户名称"
          >
            <el-option
              v-for="item in customerList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交货日期">
          <el-date-picker
            v-model="saleDeliveryQueryForm.deliveryAttr"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="出库状态">
          <el-select
            v-model="saleDeliveryQueryForm.deliveryStatus"
            placeholder="出库状态"
          >
            <el-option value="未出库">未出库</el-option>
            <el-option value="出库中">出库中</el-option>
            <el-option value="已出库">已出库</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="saleDeliveryQueryForm.createTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getSaleDeliveryList"
            >查询</el-button
          >
          <el-button @click="resetSaleDeliveryList">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="saleDeliveryList">
        <el-table-column
          v-for="item in saleDeliveryColumn"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
        ></el-table-column>
        <el-table-column label="操作" v-slot="{ row }" width="280px">
          <div>
            <el-button
              type="primary"
              size="mini"
              @click="OpenEditSaleDeliveryDialog(row)"
              >修改</el-button
            >
            <el-button size="mini" type="danger" @click="DelSaleContractD(row)"
              >删除</el-button
            >
          </div>
        </el-table-column>
      </el-table>
      <el-pagination
        style="display: flex; justify-content: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="saleDeliveryPager.page"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="saleDeliveryPager.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="saleDeliveryPager.total"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      center
      :visible.sync="editSaleDeliveryDialogVisible"
      @close="closeSaleDeliveryDialog"
      :close-on-click-modal="false"
      title=""
    >
      <el-form ref="saleDeliveryFormRef" :model="doEditSaleDeliveryForm" inline>
        <el-form-item label="送货方式" prop="deliveryMethod" required>
          <el-select
            v-model="doEditSaleDeliveryForm.deliveryMethod"
            placeholder="送货方式"
          >
            <el-option value="物流">物流</el-option>
            <el-option value="快递">快递</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交货日期" prop="deliveryDate" required>
          <el-date-picker
            v-model="doEditSaleDeliveryForm.deliveryDate"
            type="date"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="收货地址" prop="deliveryAddress" required>
          <el-input
            v-model="doEditSaleDeliveryForm.deliveryAddress"
            placeholder="收货地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contact" required>
          <el-input
            v-model="doEditSaleDeliveryForm.contact"
            placeholder="联系人"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone" required>
          <el-input
            v-model="doEditSaleDeliveryForm.phone"
            placeholder="联系电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            resize="none"
            :rows="3"
            v-model="doEditSaleDeliveryForm.remark"
            placeholder="备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div>
          <el-button @click="closeSaleDeliveryDialog">取消</el-button>
          <el-button @click="EditOrderDelivery">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getSaleDeliveryList, editSaleDeliveryList, delSaleDeliveryList } from '@/api_zc/scm/sale-management/sale-delivery'
import { getCustomerList } from '@/api_zc/task/sale-order-approve'
export default {
  mounted () {
    this.getSaleDeliveryList()
    this.getCustomerList()
  },
  data () {
    return {
      saleDeliveryList: [],
      saleDeliveryPager: {
        page: 1,
        limit: 10,
        total: 0
      },
      saleDeliveryColumn: [
        {
          label: '编号',
          prop: 'id'
        },
        {
          label: '发货编号',
          prop: 'deliveryNo'
        },
        {
          label: '合同编号',
          prop: 'contract.contractNo'
        },
        {
          label: '客户名称',
          prop: 'customer.name'
        },
        {
          label: '送货方式',
          prop: 'deliveryMethod'
        },
        {
          label: '交货日期',
          prop: 'deliveryDate'
        },
        {
          label: '收货地址',
          prop: 'deliveryAddress'
        },
        {
          label: '联系人',
          prop: 'contact'
        },
        {
          label: '联系电话',
          prop: 'phone'
        },
        {
          label: '出库状态',
          prop: 'deliveryStatus'
        },
        {
          label: '创建时间',
          prop: 'createTime'
        },
      ],
      doEditSaleDeliveryForm: {
        id: '',
        deliveryMethod: '',
        deliveryDate: '',
        deliveryAddress: '',
        contact: '',
        phone: '',
        remark: '',
      },
      editSaleDeliveryDialogVisible: false,
      customerList: [],
      saleDeliveryQueryForm: {
        deliveryNo: '',
        contractNo: '',
        customerName: '',
        deliveryStartDate: '',
        deliveryEndDate: '',
        deliveryAttr: [],
        deliveryStatus: '',
        createTime: [],
        createStartTime: '',
        createEndTime: ''
      }
    }
  },
  methods: {
    async getCustomerList () {
      const { data: { content } } = await getCustomerList()
      this.customerList = content
    },
    async getSaleDeliveryList () {
      if (!this.saleDeliveryQueryForm.deliveryAttr) {
        return
      }
      if (!this.saleDeliveryQueryForm.createTime) {
        return
      }
      ;[this.saleDeliveryQueryForm.deliveryStartDate, this.saleDeliveryQueryForm.deliveryEndDate] = this.saleDeliveryQueryForm.deliveryAttr
        ;[this.saleDeliveryQueryForm.createStartTime, this.saleDeliveryQueryForm.createEndTime] = this.saleDeliveryQueryForm.createTime
      const { data: { total, content } } = await getSaleDeliveryList({
        ...this.saleDeliveryQueryForm,
        page: this.saleDeliveryPager.page,
        limit: this.saleDeliveryPager.limit
      })
      this.saleDeliveryList = content
      this.saleDeliveryPager.total = total
    },
    resetSaleDeliveryList () {
      Object.assign(this.saleDeliveryQueryForm, this.$options.data().saleDeliveryQueryForm)
      this.getSaleDeliveryList()
    },
    OpenEditSaleDeliveryDialog (row) {
      for (let key in row) {
        if (row.hasOwnProperty(key)) {
          if (this.doEditSaleDeliveryForm.hasOwnProperty(key)) {
            this.doEditSaleDeliveryForm[key] = row[key]
          }
        }
      }
      this.editSaleDeliveryDialogVisible = true
    },
    DelSaleContractD (row) {
      this.$confirm(`是否确认删除销售发货单编号为${row.deliveryNo}的数据项？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delSaleDeliveryList({ ids: [row.id] })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getSaleDeliveryList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    EditOrderDelivery () {
      this.$refs.saleDeliveryFormRef.validate(async (callback) => {
        if (!callback) {
          return
        }
        this.doEditSaleDeliveryForm.deliveryDate = new Date(this.doEditSaleDeliveryForm.deliveryDate)
        await editSaleDeliveryList(this.doEditSaleDeliveryForm)
        this.getSaleDeliveryList()
        this.$message.success('修改成功')
        this.editSaleDeliveryDialogVisible = false
      })
    },
    closeSaleDeliveryDialog () {
      this.$refs.saleDeliveryFormRef.resetFields()
      this.editSaleDeliveryDialogVisible = false
    },
    handleSizeChange (val) {
      this.saleDeliveryPager.limit = val
      this.getSaleDeliveryList()
    },
    handleCurrentChange (val) {
      this.saleDeliveryPager.page = val
      this.getSaleDeliveryList()
    }
  }
}
</script>

<style>
</style>